<template>
<div>
    <div>
        <van-nav-bar title="出国境代录入" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="heightF" ref="main">
        <van-form @submit="onSubmit">
            <van-cell-group>
                <van-cell title="代申请人员" v-model=" dsquserName" :value=this.dsquserName is-link to="selectpeop" />
            </van-cell-group>
            <!-- <van-cell-group>
                <van-field v-model="userName" type="text" input-align="right" label="用户" />
            </van-cell-group> -->
            <van-cell-group>
                <van-field value='申请出国(境)' type="text" input-align="right" label="申请类型" placeholder="申请出国(境)" />
            </van-cell-group>
            <van-cell-group>
                <van-field name="starttime" v-model="starttime" clearable label="开始时间" input-align="right" placeholder="请输入开始时间" @focus="start" />
                <!-- 开始时间控件 -->
                <van-popup v-model="show" position="bottom">
                    <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
                </van-popup>
            </van-cell-group>
            <van-cell-group>
                <van-field name="endtime" v-model="endtime" clearable label="结束时间" input-align="right" placeholder="请输入结束时间" @focus="end" />
                <!-- 结束时间控件 -->
                <van-popup v-model="show1" position="bottom">
                    <van-datetime-picker v-model="currentDate1" type="date" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
                </van-popup>
            </van-cell-group>

            <van-cell-group>
                <div class="group-leader flexbox">
                    <van-field readonly name="isAmOrPm2" clickable label="申请类型" :value="value2" input-align="right" placeholder="请选择类型" @click="mqinAi2" />
                    <div v-if="myIf2">
                        <van-popup v-model="showPicker" position="bottom">
                            <van-picker title="请选择类型" show-toolbar :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" />
                        </van-popup>
                    </div>
                </div>
            </van-cell-group>
            <van-card v-if="hzcard">
                <template #tags>
                    <van-cell>普通护照 </van-cell>
                    <van-cell>证件号码 {{hzpassportNumber}}</van-cell>
                    <van-cell>有效期 {{hzstartTime}} -{{hzendTime}}</van-cell>
                </template>

            </van-card>

            <van-card v-if="txzcard">
                <template #tags>
                    <van-cell>往来港澳通行证或签注 </van-cell>
                    <van-cell>证件号码 {{txzpassportNumber}}</van-cell>
                    <van-cell>有效期 {{txzstartTime}} -{{txzendTime}}</van-cell>
                </template>
            </van-card>
            <van-cell center title="是否办证">
                <template #right-icon>
                    <van-switch v-model="checked" size="24" />
                </template>
            </van-cell>
            <van-cell-group>
                <van-field v-model="places" input-align="right" label="途径地" />
            </van-cell-group>

            <van-field v-model="reson" rows="3" autosize label="备注" type="textarea" input-align="right" placeholder="请填写备注" />
        </van-form>

        <van-cell center title="同行人">
            <template #right-icon>
                <van-button type="info" @click="tjtxr()">添加同行人</van-button>
            </template>
        </van-cell>

        <div>

            <div v-if="addtxr">
                <van-card>
                    <template #tags>
                        <van-form @submit="pushtxr">
                            <van-field v-model="name" name="name" label="同行人亲属姓名" label-width="130px" input-align="right" placeholder="同行人亲属姓名" :rules="[{ required: true, message: '请填写同行人亲属姓名' }]" />
                            <van-field v-model="relation" name="relation" label-width="130px" input-align="right" label="同行亲属与本人关系" placeholder="同行亲属与本人关系" :rules="[{ required: true, message: '请填写同行亲属与本人关系' }]" />
                            <van-field v-model="workUnit" name="workUnit" label-width="130px" input-align="right" label="同行亲属工作单位" placeholder="同行亲属工作单位" :rules="[{ required: true, message: '请填写同行亲属工作单位' }]" />
                            <van-field v-model="workJob" name="workJob" label-width="130px" input-align="right" label="同行亲属职务" placeholder="同行亲属职务" :rules="[{ required: true, message: '请填写同行亲属职务' }]" />
                            <div style="margin: 16px;">
                                <!-- <van-button block type="info" native-type="submit">
                                    添加
                                </van-button> -->
                                <van-button block type="info" native-type="pushtxr()">
                                    添加
                                </van-button>
                            </div>
                        </van-form>
                    </template>
                </van-card>

                <van-cell-group>
                    <van-cell v-for="(item,index) in list" :key="index">
                        <van-card>
                            <template #tags>
                                <van-cell title="同行人亲属姓名" :value=item.name style="padding-bottom: 3px;padding-top: 3px;" />
                                <van-cell title="同行亲属与本人关系" :value=item.relation style="padding-bottom: 3px;padding-top: 3px;" />
                                <van-cell title="同行亲属工作单位" :value=item.workUnit style="padding-bottom: 3px;padding-top: 3px;" />
                                <van-cell title="同行亲属职务" :value=item.workJob style="padding-bottom: 3px;padding-top: 3px;" />
                                <van-button block=true type="danger" @click="del(index)">删除</van-button>
                            </template>
                        </van-card>
                    </van-cell>
                </van-cell-group>
                <!-- <div>
                    <van-button block=true type="info" @click="add()">发送</van-button>
                </div> -->
            </div>

        </div>

    </div>
    <div>
        <van-button type="info" block @click="handleSumbit('insert')">提交</van-button>
    </div>
</div>
</template>

<script>
import axios from "axios";
import {
    Dialog
} from "vant";

import {
    ADD_FILE_TYPE,
    myLeaveStatistics,
    checkApi,
    Temporary_storage,
    update
} from "@/api/fy";
import {
    getDay,
    Transformation,
    browserPdf
} from "@/api/common";

import Cookies from "js-cookie";
export default {
    name: "sss",
    components: {},
    props: {},
    data() {
        return {
            type: "申请出国(境)",
            activeName: '1',
            checked: 0,
            myIf1: false,
            myIf2: false,
            myIf3: false,
            hzcard: false,
            txzcard: false,
            addtxr: false,
            zc: false,
            reson: "",
            value1: "",
            value2: "",
            value3: "",
            value2index: '',
            hour: "",
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            columns1: ["上午", "下午"],
            columns2: ["出境旅游", "出境探亲", '出国旅游', '出国探亲'],
            columns3: ["不离开", "离开"],
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021, 12, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳
            Total: "",
            thisYearTime: "",
            thisYearUsedTime: "",
            usedTime: "",
            usednotTime: "",
            userName: Cookies.get("userName"),
            hzpassportNumber: '',
            hzstartTime: '',
            hzendTime: '',
            txzpassportNumber: '',
            txzstartTime: '',
            txzendTime: '',
            hzpassportId: "",
            txzpassportId: "",
            passportNumber: '',
            passportId: '',
            passportType: "",
            places: "",
            list: [],
            name: '',
            //关系
            relation: '',
            //单位
            workUnit: "",
            //职务
            workJob: '',
            //I新增  U更新  D删除
            updateStatus: '',
            data: {
                userName: '',
                starttime: '',
                endtime: '',
            },
            dsquserName: ''

        };
    },
    created() {
        this.hz();
        this.dsquserName = sessionStorage.getItem("userName")
        this.applyTime =
            this.currentDate.getFullYear() +
            "年" +
            (Number(this.currentDate.getMonth()) + 1) +
            "月" +
            this.currentDate.getDate() +
            "日 " +
            this.currentDate.getHours() +
            ":" +
            this.currentDate.getMinutes();
        // this.applyTime = new Date(this.currentDate).getTime() / 1000;
        this.getmyLeaveStatistics(this.currentDate.getFullYear());

        var recordIdparams = this.$route.params.recordId
        var recordTypeparams = this.$route.params.recordType
        if (recordIdparams != null && recordIdparams != "" && recordTypeparams != null && recordTypeparams != '') {
            this.tj = false
            this.gx = true
            this.zc = true
            var data = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,

            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveQuery/getRecord',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    var val = response.data.data.record;
                    this.starttime = val.planStartTime
                    this.value1 = val.planStartDetailTime = 0 ? '上午' : '下午'
                    this.endtime = val.planEndTime
                    this.value2 = val.planStartDetailTime = 0 ? '上午' : '下午'
                    this.hour = val.planSumTime
                    this.value3 = val.isLeaveGz = 0 ? '离开' : '不离开'
                    this.reson = val.reason
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.push({
                            name: 'wdqxj'
                        })
                    });
                }
            })
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1); //返回上一层
            sessionStorage.removeItem('userId')
            sessionStorage.removeItem('userName')
        },
        tjtxr() {
            this.addtxr = true
              this.$nextTick(() => {
                this.$refs.main.scrollTop = document.body.scrollHeight;
            });
            // this.onSubmit()
            // this.$router.push({
            //     name: 'tjtxr'
            // })
        },
        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        hz() {
            var data = {
                userId: Cookies.get("userId")
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'abroadPassport/getUserPassport',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    var hz = response.data.data.hz;
                    var txz = response.data.data.txz;
                    this.hzpassportNumber = hz.passportNumber
                    this.hzstartTime = hz.startTime
                    this.hzendTime = hz.endTime
                    this.hzpassportId = hz.id
                    this.txzpassportNumber = txz.passportNumber
                    this.txzstartTime = txz.startTime
                    this.txzendTime = txz.endTime
                    this.txzpassportId = txz.id

                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.push({
                            name: 'wdqxj'
                        })
                    });
                }
            })
        },
        getDay() {
            const obj = {
                planStartTime: this.starttime + ":00",
                planEndTime: this.endtime + ":00",
                planStartDetailTime: this.value1 == "上午" ? 0 : 1,
                planEndDetailTime: this.value2 == "上午" ? 0 : 1
            };
            getDay(obj).then(res => {
                if (res.code == "200") {
                    this.hour = res.data.result;
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: res.data.msg
                    }).then(() => {});
                }
            });
        },
        getmyLeaveStatistics(Year) {
            const obj = {
                page: 1,
                limit: 10,
                dateYear: Year,
                recordType: "LEAVE_SICK"
            };
            myLeaveStatistics(obj)
                .then(res => {
                    this.type = Transformation(res.data[0].recordType);
                    this.Total = res.data[0].sumTime;
                    this.thisYearUsedTime = res.data[0].thisYearUsedTime;
                    this.thisYearnotTime =
                        res.data[0].sumTime - res.data[0].thisYearUsedTime;
                    this.thisYearTime = res.data[0].thisYearTime;
                    this.usedTime = res.data[0].usedTime;
                    this.usednotTime = res.data[0].sumTime - res.data[0].usedTime;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        transformRequest(data) {
            data = JSON.stringify(data)
            return data
        },
        handleSumbit(type) {
            var userId = Cookies.get("userId");
            const obj = {
                planStartTime: this.starttime + ":00",
                planEndTime: this.endtime + ":00",
                passportType: this.passportType,
                applyType: this.value2index,
                // isGoAbroad: ""
                isApplyPassport: this.checked == true ? '1' : '0',
                places: this.places,
                reason: this.reson,

                passportNumber: this.passportNumber,
                passportId: this.passportId,
                abroadOthersList: '',

                userId: sessionStorage.getItem("userId"),
                userName: this.dsquserName,
                agentUserId: Cookies.get("userId")
            };

            // const arr = [{
            //     name: "",
            //     relation: "",
            //     workUnit: "",
            //     updateStatus: "I",
            //     workJob: "",
            // }]
            // const arr = this.$route.params.list
            const arr = this.list
            obj.abroadOthersList = arr
            const that = this;
            this.$axios({
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                },
                method: 'post',
                url: 'abroadApply/insertWithOutAudit',
                data: this.transformRequest(obj)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    sessionStorage.removeItem('userId')
                    sessionStorage.removeItem('userName')
                    Dialog.alert({
                        title: response.data.msg,
                        message: response.data.msg
                    }).then(() => {
                        this.$router.push({
                            name: 'cgjgl'
                        })
                    });
                } else {
                    sessionStorage.removeItem('userId')
                    sessionStorage.removeItem('userName')
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.push({
                            name: 'cgjgl'
                        })
                    });
                }
            })

        },
        pushtxr(values) {
            console.log('submit', values, 111111111);
            this.list.push(values)
            console.log(this.list, 666666666666)
            this.name = ''
            this.relation = ''
            this.workUnit = ''
            this.workJob = ''

        },
        del(index) {
            this.list.splice(index, 1)
        },
        add() {
            console.log(this.list, 6666666666666)
            this.$router.push({
                name: 'cgjsq',
                params: {
                    list: this.list
                }
            })
        },
        update() {
            var userId = Cookies.get("userId");
            const obj = {
                recordType: "LEAVE_SICK",
                recordId: this.$route.params.recordId,
                planStartTime: this.starttime + ":00",
                planEndTime: this.endtime + ":00",
                planStartDetailTime: this.value1 == "上午" ? 0 : 1,
                planEndDetailTime: this.value2 == "上午" ? 0 : 1,
                reason: this.reson,
                isLeaveGz: this.value3 == "不离开" ? 0 : 1,
                userId: userId
            };
            update(obj).then(res => {
                Dialog.alert({
                    title: Transformation(obj.recordType),
                    message: res.msg
                }).then(() => {
                    this.$router.push({
                        name: 'wdqxj'
                    })
                });
            });
        },
        browserPdf(id) {
            browserPdf(id);
        },
        onConfirm1(e) {
            this.value1 = e;
            this.showPicker = false;
        },
        onConfirm2(e, index) {

            this.value2 = e;
            this.value2index = index;
            this.showPicker = false;
            if (index == 0 || index == 1) {
                this.txzcard = true
                this.hzcard = false
                this.passportId = this.hzpassportId
                this.passportNumber = this.hzpassportNumber
                this.passportType = 1
            } else if (index == 2 || index == 3) {
                this.hzcard = true
                this.txzcard = false
                this.passportNumber = this.txzpassportNumber
                this.passportId = this.txzpassportId
                this.passportType = 0
            }
        },
        onConfirm3(e) {
            this.value3 = e;
            this.showPicker = false;
        },
        mqinAi1() {
            this.myIf1 = true;
            this.myIf2 = false;
            this.myIf3 = false;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        mqinAi2() {
            this.myIf1 = false;
            this.myIf2 = true;
            this.myIf3 = false;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        mqinAi3() {
            this.myIf1 = false;
            this.myIf2 = false;
            this.myIf3 = true;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        onSubmit(values) {
            console.log("submit", values);
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate()
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate()
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    }
};
</script>

<style scoped>
.heightF{
    height: calc(100vh - 90px);
    overflow-y: scroll;
}
</style >
